<template>
  <Head />
  <div id="wrap">
    <div class="menu-wrap" id="menu-wrap">
      <!-- 左侧菜单 -->
      <Menu class="menu" />
    </div>
    <div class="content">
      <!-- 面包屑 -->
      <showMenus></showMenus>
      <!-- 路由 -->
      <!-- <keep-alive> -->
      <router-view />
      <!-- </keep-alive> -->
    </div>
  </div>
</template>

<script>
import Menu from './menu.vue'
import Head from './head.vue'
import showMenus from './showMenus.vue'
import { onMounted, ref, reactive } from 'vue'
export default {
  components: { Menu, Head, showMenus },
  setup() {
    /* 菜单宽度伸拉逻辑 */
    let mouseDown = ref(false)
    onMounted(() => {
      let menuWarp = document.getElementById('menu-wrap')
      document.body.onmousemove = function () {
        if (event.clientX > menuWarp.offsetWidth - 5) {
          menuWarp.style.cursor = 'col-resize'
        } else {
          menuWarp.style.cursor = 'default'
        }
        if (mouseDown.value) {
          menuWarp.style.width = event.clientX + 'px'
        }
      }
      menuWarp.onmousedown = function () {
        if (event.clientX > menuWarp.offsetWidth - 5) {
          mouseDown.value = true
        } else {
          mouseDown.value = false
        }
      }
      document.body.onmouseup = function () {
        mouseDown.value = false
        menuWarp.style.cursor = 'default'
      }
    })
  },
}
</script>

<style scoped>
#wrap {
  display: flex;
  height: calc(100% - 60px);
}
.content {
  /* width: 100%; */
  width: calc(100% - 251px);
  height: 100%;
}
.menu-wrap {
  flex-shrink: 0;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /* background: #0f4894; */
  background: #0f4894;
  border-right: solid 1px #e6e6e6;
}
/** 滚动条样式 */
.menu-wrap::-webkit-scrollbar {
  /*外层轨道*/
  width: 0px;
  height: 2px;
  background: #ccc;
  border-radius: 2px;
  position: absolute;
  left: -5px;
}
.menu-wrap::-webkit-scrollbar-thumb {
  /*内层轨道*/
  display: block;
  width: 6px;
  margin: 0 auto;
  border-radius: 10px;
  background: #555;
}
</style>
